<template>
  <view class="search-result">
    <!-- 搜索头部 -->
    <view class="search-header">
      <view class="search-box" @tap="goSearch">
        <text class="iconfont icon-search"></text>
        <text class="keyword">{{ keyword }}</text>
      </view>
      <text class="filter-btn" @tap="showFilter">
        <text class="iconfont icon-filter"></text>
        筛选
      </text>
    </view>
    
    <!-- 筛选抽屉 -->
    <uni-drawer ref="filterDrawer" mode="right">
      <view class="filter-drawer">
        <view class="drawer-header">
          <text class="title">筛选条件</text>
          <text class="reset" @tap="resetFilter">重置</text>
        </view>
        
        <!-- 医院等级 -->
        <view class="filter-section">
          <text class="section-title">医院等级</text>
          <view class="tag-list">
            <text 
              v-for="(item, index) in hospitalLevels"
              :key="index"
              :class="{ active: filter.level === item.value }"
              @tap="selectLevel(item.value)"
            >{{ item.label }}</text>
          </view>
        </view>
        
        <!-- 医院类型 -->
        <view class="filter-section">
          <text class="section-title">医院类型</text>
          <view class="tag-list">
            <text 
              v-for="(item, index) in hospitalTypes"
              :key="index"
              :class="{ active: filter.type === item.value }"
              @tap="selectType(item.value)"
            >{{ item.label }}</text>
          </view>
        </view>
        
        <!-- 医院特色 -->
        <view class="filter-section">
          <text class="section-title">医院特色</text>
          <view class="tag-list">
            <text 
              v-for="(item, index) in hospitalFeatures"
              :key="index"
              :class="{ active: filter.features.includes(item.value) }"
              @tap="toggleFeature(item.value)"
            >{{ item.label }}</text>
          </view>
        </view>
        
        <!-- 排序方式 -->
        <view class="filter-section">
          <text class="section-title">排序方式</text>
          <view class="sort-list">
            <view 
              class="sort-item"
              v-for="(item, index) in sortOptions"
              :key="index"
              :class="{ active: filter.sort === item.value }"
              @tap="selectSort(item.value)"
            >
              <text>{{ item.label }}</text>
              <text class="iconfont icon-check"></text>
            </view>
          </view>
        </view>
        
        <!-- 底部按钮 -->
        <view class="drawer-footer">
          <button 
            class="confirm-btn primary-btn"
            @tap="applyFilter"
          >确定</button>
        </view>
      </view>
    </uni-drawer>
    
    <!-- 结果列表 -->
    <scroll-view 
      scroll-y
      class="result-list"
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
      @scrolltolower="loadMore"
    >
      <view 
        class="hospital-item"
        v-for="(item, index) in hospitals"
        :key="index"
        @tap="viewHospital(item)"
      >
        <image :src="item.image" mode="aspectFill" class="hospital-image" />
        <view class="info">
          <view class="name-level">
            <text class="name">{{ item.name }}</text>
            <text class="level">{{ item.level }}</text>
          </view>
          <text class="type">{{ item.type }}</text>
          <view class="tags">
            <text 
              v-for="(tag, idx) in item.tags"
              :key="idx"
            >{{ tag }}</text>
          </view>
          <view class="footer">
            <view class="rating">
              <text class="score">{{ item.rating }}</text>
              <text class="label">综合评分</text>
            </view>
            <view class="distance">
              <text class="value">{{ item.distance }}km</text>
              <text class="label">距离</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 加载更多 -->
      <uni-load-more 
        :status="loadMoreStatus"
        :content-text="{
          contentdown: '上拉加载更多',
          contentrefresh: '加载中...',
          contentnomore: '没有更多了'
        }"
      />
    </scroll-view>
    
    <!-- 医生列表 -->
    <scroll-view 
      v-if="currentTab === 2"
      scroll-y
      class="result-list"
      @scrolltolower="loadMore"
    >
      <view 
        class="doctor-item"
        v-for="(item, index) in doctors"
        :key="index"
        @tap="viewDoctor(item)"
      >
        <image :src="item.avatar" mode="aspectFill" class="doctor-avatar" />
        <view class="info">
          <view class="name-title">
            <text class="name">{{ item.name }}</text>
            <text class="title">{{ item.title }}</text>
          </view>
          <text class="hospital">{{ item.hospital }}</text>
          <text class="specialty">{{ item.specialty }}</text>
          <view class="tags">
            <text 
              v-for="(tag, idx) in item.tags"
              :key="idx"
            >{{ tag }}</text>
          </view>
          <view class="schedule" v-if="item.schedule">
            <text class="date">{{ item.schedule.date }}</text>
            <text class="time">{{ item.schedule.time }}</text>
            <text class="price">¥{{ item.schedule.price }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 搜索关键词
const keyword = ref('')

// 筛选条件
const filter = ref({
  level: '',
  type: '',
  features: [],
  sort: 'default'
})

// 医院等级
const hospitalLevels = [
  { value: 'aaa', label: '三级甲等' },
  { value: 'aa', label: '三级乙等' },
  { value: 'a', label: '三级丙等' },
  { value: 'b', label: '二级医院' }
]

// 医院类型
const hospitalTypes = [
  { value: 'general', label: '综合医院' },
  { value: 'special', label: '专科医院' },
  { value: 'tcm', label: '中医医院' },
  { value: 'private', label: '私立医院' }
]

// 医院特色
const hospitalFeatures = [
  { value: '24h', label: '24小时急诊' },
  { value: 'parking', label: '提供停车' },
  { value: 'online', label: '在线支付' },
  { value: 'insurance', label: '医保定点' }
]

// 排序选项
const sortOptions = [
  { value: 'default', label: '综合排序' },
  { value: 'distance', label: '距离优先' },
  { value: 'rating', label: '评分优先' }
]

// 医院列表
const hospitals = ref([
  {
    id: 1,
    name: '澳门镜湖医院',
    level: '三级甲等',
    type: '综合医院',
    image: '/static/hospital/kiang-wu.jpg',
    tags: ['综合医院', '24小时急诊'],
    rating: 4.8,
    distance: 2.5
  },
  {
    id: 2,
    name: '澳门科大医院',
    level: '三级甲等',
    type: '综合医院',
    image: '/static/hospital/must.jpg',
    tags: ['大学医院', '专科门诊'],
    rating: 4.7,
    distance: 5.8
  }
])

// 加载状态
const refreshing = ref(false)
const loadMoreStatus = ref('more')

// 显示筛选抽屉
const filterDrawer = ref(null)
const showFilter = () => {
  filterDrawer.value?.open()
}

// 选择医院等级
const selectLevel = (level) => {
  filter.value.level = level
}

// 选择医院类型
const selectType = (type) => {
  filter.value.type = type
}

// 切换医院特色
const toggleFeature = (feature) => {
  const index = filter.value.features.indexOf(feature)
  if (index > -1) {
    filter.value.features.splice(index, 1)
  } else {
    filter.value.features.push(feature)
  }
}

// 选择排序方式
const selectSort = (sort) => {
  filter.value.sort = sort
}

// 重置筛选
const resetFilter = () => {
  filter.value = {
    level: '',
    type: '',
    features: [],
    sort: 'default'
  }
}

// 应用筛选
const applyFilter = () => {
  filterDrawer.value?.close()
  // 这里调用筛选API
  loadSearchResult()
}

// 下拉刷新
const onRefresh = () => {
  refreshing.value = true
  loadSearchResult()
  setTimeout(() => {
    refreshing.value = false
  }, 1000)
}

// 加载更多
const loadMore = () => {
  if (loadMoreStatus.value !== 'more') return
  loadMoreStatus.value = 'loading'
  
  // 这里调用加载更多API
  setTimeout(() => {
    loadMoreStatus.value = 'noMore'
  }, 1000)
}

// 加载搜索结果
const loadSearchResult = () => {
  // 这里调用搜索API
  console.log('加载搜索结果:', keyword.value, filter.value)
}

// 查看医院详情
const viewHospital = (hospital) => {
  uni.navigateTo({
    url: `/pages/hospital/detail?id=${hospital.id}`
  })
}

// 跳转到搜索页
const goSearch = () => {
  uni.navigateTo({
    url: '/pages/search/index'
  })
}

// 医生列表数据
const doctors = ref([
  {
    id: 1,
    name: '张医生',
    title: '主任医师',
    avatar: '/static/doctor/avatar1.jpg',
    hospital: '澳门镜湖医院',
    specialty: '冠心病、高血压、心律失常',
    tags: ['专家门诊', '视频问诊'],
    schedule: {
      date: '今天',
      time: '上午 9:00-11:30',
      price: 300
    }
  },
  {
    id: 2,
    name: '李医生',
    title: '副主任医师',
    avatar: '/static/doctor/avatar2.jpg',
    hospital: '澳门科大医院',
    specialty: '糖尿病、内分泌疾病',
    tags: ['普通门诊'],
    schedule: {
      date: '明天',
      time: '下午 14:00-16:30',
      price: 200
    }
  }
])

// 查看医生详情
const viewDoctor = (doctor) => {
  uni.navigateTo({
    url: `/pages/doctor/detail?id=${doctor.id}&name=${encodeURIComponent(doctor.name)}&hospital=${encodeURIComponent(doctor.hospital)}`
  })
}
</script>

<style lang="scss">
.search-result {
  min-height: 100vh;
  background: $bg-color;
  
  .search-header {
    display: flex;
    align-items: center;
    padding: 20rpx;
    background: #fff;
    
    .search-box {
      flex: 1;
      height: 72rpx;
      background: $bg-color;
      border-radius: $radius-xl;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      margin-right: 20rpx;
      
      .iconfont {
        font-size: 32rpx;
        color: $text-secondary;
        margin-right: 12rpx;
      }
      
      .keyword {
        font-size: 28rpx;
        color: $text-primary;
      }
    }
    
    .filter-btn {
      font-size: 28rpx;
      color: $text-regular;
      
      .iconfont {
        margin-right: 4rpx;
      }
      
      &:active {
        opacity: 0.8;
      }
    }
  }
  
  .filter-drawer {
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    
    .drawer-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1rpx solid #eee;
      
      .title {
        font-size: 32rpx;
        color: $text-primary;
        font-weight: bold;
      }
      
      .reset {
        font-size: 28rpx;
        color: $text-secondary;
        
        &:active {
          opacity: 0.8;
        }
      }
    }
    
    .filter-section {
      padding: 30rpx;
      border-bottom: 1rpx solid #eee;
      
      .section-title {
        font-size: 30rpx;
        color: $text-primary;
        margin-bottom: 20rpx;
      }
      
      .tag-list {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;
        
        text {
          font-size: 26rpx;
          color: $text-regular;
          padding: 12rpx 24rpx;
          background: $bg-color;
          border-radius: $radius-lg;
          
          &.active {
            color: $primary-color;
            background: $primary-light;
          }
        }
      }
      
      .sort-list {
        .sort-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20rpx 0;
          
          text {
            font-size: 28rpx;
            color: $text-regular;
          }
          
          .iconfont {
            font-size: 32rpx;
            color: $primary-color;
            opacity: 0;
          }
          
          &.active {
            text {
              color: $primary-color;
            }
            
            .iconfont {
              opacity: 1;
            }
          }
        }
      }
    }
    
    .drawer-footer {
      margin-top: auto;
      padding: 30rpx;
      
      .confirm-btn {
        width: 100%;
      }
    }
  }
  
  .result-list {
    height: calc(100vh - 112rpx);
    
    .hospital-item {
      display: flex;
      padding: 30rpx;
      background: #fff;
      border-bottom: 1rpx solid #eee;
      
      .hospital-image {
        width: 160rpx;
        height: 120rpx;
        border-radius: $radius-lg;
        margin-right: 20rpx;
      }
      
      .info {
        flex: 1;
        
        .name-level {
          display: flex;
          align-items: center;
          margin-bottom: 8rpx;
          
          .name {
            font-size: 32rpx;
            color: $text-primary;
            font-weight: bold;
            margin-right: 12rpx;
          }
          
          .level {
            font-size: 22rpx;
            color: $primary-color;
            background: $primary-light;
            padding: 4rpx 12rpx;
            border-radius: $radius-sm;
          }
        }
        
        .type {
          font-size: 26rpx;
          color: $text-regular;
          margin-bottom: 12rpx;
          display: block;
        }
        
        .tags {
          margin-bottom: 16rpx;
          
          text {
            display: inline-block;
            font-size: 22rpx;
            color: $text-secondary;
            background: $bg-color;
            padding: 4rpx 12rpx;
            border-radius: $radius-sm;
            margin-right: 12rpx;
          }
        }
        
        .footer {
          display: flex;
          align-items: center;
          
          .rating,
          .distance {
            display: flex;
            align-items: center;
            margin-right: 30rpx;
            
            .score,
            .value {
              font-size: 28rpx;
              color: $text-primary;
              font-weight: bold;
              margin-right: 8rpx;
            }
            
            .label {
              font-size: 24rpx;
              color: $text-secondary;
            }
          }
        }
      }
    }
  }
  
  .doctor-item {
    display: flex;
    padding: 30rpx;
    background: #fff;
    border-bottom: 1rpx solid #eee;
    
    .doctor-avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }
    
    .info {
      flex: 1;
      
      .name-title {
        margin-bottom: 8rpx;
        
        .name {
          font-size: 32rpx;
          color: $text-primary;
          font-weight: bold;
          margin-right: 12rpx;
        }
        
        .title {
          font-size: 26rpx;
          color: $text-regular;
        }
      }
      
      .hospital {
        font-size: 26rpx;
        color: $text-regular;
        margin-bottom: 8rpx;
        display: block;
      }
      
      .specialty {
        font-size: 24rpx;
        color: $text-secondary;
        margin-bottom: 12rpx;
      }
      
      .tags {
        margin-bottom: 16rpx;
        
        text {
          display: inline-block;
          font-size: 22rpx;
          color: $primary-color;
          background: $primary-light;
          padding: 4rpx 12rpx;
          border-radius: $radius-sm;
          margin-right: 12rpx;
        }
      }
      
      .schedule {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        
        .date {
          color: $success;
          margin-right: 12rpx;
        }
        
        .time {
          color: $text-regular;
          margin-right: 12rpx;
        }
        
        .price {
          color: $warning;
          font-weight: bold;
        }
      }
    }
    
    &:active {
      background: $bg-color;
    }
  }
}
</style> 